<template>
	<div class="allParent" v-bind:class="{overflow:isOverflow}">
		<section class="section"></section>
		<div class="header">
			<div class="headerDiv">
				<div class="headerBg">
					<p class="vipText">开通花卡享平价购物</p>
				</div>
			</div>
			
			<!--<coupon :item="couponDetail" :topClass="topClass" :bottomClass="bottomClass"></coupon>-->

			<div class='username flex  flex-item-v-center'>
				<label>手机号</label>
				<input type='tel' v-model="phone" @keyup="validation" placeholder='请输入手机号' maxlength="11" size="11" />
			</div>
			<div class='username flex flex-item-v-center'>
				<label>验证码</label>
				<input v-if="phone.length==11&&disabled" type="button" v-model="security" class="codebtn" @click="getSmsCode" />
				<input v-else type="button" v-model="security" class="codebtn" />
				<input type='tel' class='Code' v-model="securityCode" placeholder='请输入验证码' maxlength='6' />
			</div>
			<div class='username flex  flex-item-v-center'>
				<label>兑换码</label>
				<input type="text" v-model="replaceCode"  placeholder='请输入兑换码' maxlength='8'/>
			</div>
			<div class='flex footer loginbtn'>
				<template v-if="!iscoupon">
					<input v-if="phone.length==11&&securityCode.length==6&&replaceCode.length==8" :disabled="isdisabled" type="button" value="立即兑换" @click="login" />
					<input v-else type="button" class="nosubmit" value="立即兑换" />
				</template>
				<template v-else>
					<input type="button" value="已兑换" />
				</template>
			</div>
			<div class="divSection"></div>
			<div class="goHome flex flex-item-center" @click="goWXMiniapp">
				已领取前往花伴商城
				<img class="icon_right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png"/>
			</div>
		</div>
		<section class="section"></section>
		<div class="main flex flex-item-between">
			<div class='info-box'>
				<div class='img-icon-box'>
					<img class='zk' src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/vip_zk.png' />
				</div>
				<div class='info-tips'>全场成本价</div>
			</div>
			<div class='info-box'>
				<div class='img-icon-box'>
					<img class='yf' src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/vip_yf.png' />
				</div>
				<div class='info-tips'>全场免运费</div>
			</div>
			<div class='info-box'>
				<div class='img-icon-box'>
					<img class='dx' src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/installment-icon.png' />
				</div>
				<div class='info-tips'>低息分期付</div>
			</div>
		</div>
		<section class="section"></section>
		<div class="app">
			<div id="app">
				<div class="page">
					<div class="tips">会员权益</div>
					<div class="legal-box">
						<div class="title">1.全场商品成本价</div>
						<div class="info">
							平均购买约2-3件商品即可赚回会员费哟！
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/lagel_1.png" />
						</div>
					</div>
					<div class="legal-box">
						<div class="title">2.邀请好友获得奖励金</div>
						<div class="info">
							可以通过微信小程序向好友发起会员卡开通邀请，好友通过您分享的链接开通花卡，方可确认本次邀请成功，邀请成功您可获得100元现金奖励，如您邀请的好友邀请其他用户（直属邀请）开通花卡，您同时也可获得10元奖励金，获得的奖励金可通过我的邀请（查看更多）-申请提现，运营审核通过后将与您联系发放奖励金。
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/vipre.jpg" />
						</div>
					</div>
					<div class="legal-box">
						<div class="title">3.全场免运费</div>
						<div class="info">
							花卡会员在会员时间内（免运费时间以下单时间为准）在花伴商城新购买的订单实行全场包邮！
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/lagel_2.png" />
						</div>
					</div>
					<div class="legal-box">
						<div class="title">4.低息分期付</div>
						<div class="info">
							申请马上花额度成功的花伴会员用户可享受3期免息分期等福利。
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/lagel_3.png" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<modal v-if='isOverflow' v-on:components-modal='removeToast' v-on:content='holdToast'>
			<img slot="title" class="modalTitle" src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/H5/huaban_mini_qrcode.jpeg" />
			<p slot='info' class="modalInfo">长按识别小程序二维码</p>
		</modal>
	</div>

</template>

<script>
	import Coupon from '@/components/activeComponents/coupon'
	import http from '@/util/http'
	import Api from '@/util/api'
	import Modal from '@/components/activeComponents/modal'
	let timer;
	export default {
		components: {
			Coupon,
			Modal
		},
		data() {
			return {
				topClass: 'topNoUsed',
				bottomClass: 'bottomNoUsed',
				security: '获取验证码',
				isselect: true,
				phone: '',
				replaceCode: "",
				times: 60,
				disabled: true,
				securityCode: '',
				isOverflow: false,
				couponDetail: {},
				extensionCouponNo: '',
				thirdPartMgm: '',
				iscoupon: false,
				isdisabled:false,
				channelCode: ''
			}
		},
		created() {
			if(JSON.stringify(this.$route.query) != '{}' && this.$route.query.jumpType == "TakeCard") {
				this.channelCode = this.$route.query.channelCode
			}
		},
		methods: {
			isSelected(e, isselect) {
				this.isselect = !isselect
			},
			login() {
				if(!(/^1[345678]\d{9}$/.test(this.phone))) {
					return this.toast('手机号码有误')
				}
				this.isdisabled=true;
				http.post(Api.loginLogin, {
					phone: this.phone,
					securityCode: this.securityCode,
					channelCode: this.channelCode,
				}).then((d) => {
					if(d.code == 200) {
						sessionStorage.setItem('plus_token', d.data.token)
						this.replaceCoupon();
					} else {
						this.isdisabled=false;
						this.toast(d.message)
					}
				}).catch((e) => {
					this.isdisabled=false;
					this.toast('登录失败，请检查您的网络')
				})
			},
			replaceCoupon() {
				http.post(Api.exchangeTicket, {
					exchangeCode: this.replaceCode,
				}).then((d) => {
					if(d.code == 200) {
						this.iscoupon = true;
						this.isdisabled=false;
						this.toast(d.message)
					} else {
						this.isdisabled=false;
						this.toast(d.message)
					}
				}).catch((e) => {
					this.isdisabled=false;
					this.toast('领取失败，请检查您的网络')
				})
			},
//			InviterInfo() {
//				console.log(this.thirdPartMgm)
//				if(this.thirdPartMgm && this.couponDetail.extensionSupplierId) {
//					http.post(Api.getInviterInfo, {
//						extensionCouponNo: this.extensionCouponNo,
//						extensionSupplierId: this.thirdPartMgm
//					}).then((d) => {
//						if(d.code == 200) {
//							this.iscoupon = true;
//							this.isdisabled=false;
//							this.toast(d.message)
//						} else {
//							this.isdisabled=false;
//							this.toast(d.message)
//						}
//					}).catch((e) => {
//						this.isdisabled=false;
//						this.toast('领取失败，请检查您的网络')
//					})
//				} else {
//					this.isdisabled=false;
//					this.toast('领取失败')
//				}
//			},
			validation() {
				if(this.phone.length == 11) {
					if(!(/^1[345678]\d{9}$/.test(this.phone))) {
						this.toast('手机号码有误')
					}
				}
			},
			getSmsCode() {
				if(!(/^1[345678]\d{9}$/.test(this.phone))) {
					this.toast('手机号码有误')
				}
				http.post(Api.loginGetAuthCode, {
					phone: this.phone
				}).then((d) => {
					if(d.code == 200) {
						this.toast('验证码发送成功，请注意查收')
						this.setCodetime();
						this.disabled = false;
					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					console.log(e)
					this.toast('网络错误,请检查网络')
				})
			},
			setCodetime(e) {
				this.security = (this.times) + "s后获取"
				if(this.times > 1) {
					this.times = this.times - 1
					timer = setTimeout(() => {
						this.setCodetime();
					}, 1000);
				} else {
					this.times = 60;
					this.security = '重发验证码';
					this.disabled = true;
					clearTimeout(timer);
				}
			},
			goWXMiniapp() { // 去小程序
				this.isOverflow = true
			},
			removeToast() {
				this.isOverflow = false
			},
			holdToast() {
				this.isOverflow = true
			}
		},
	}
</script>

<style lang="less" rel="stylesheet/less"  scoped="scoped">
	.icon_right{
		width: .2rem;
		height: .3rem;
	}
	.header,
	.main {
		margin: 0rem .3rem;
	}
	.headerDiv{
		margin: 0.5rem 0.5rem;
	}
	.headerBg{
		background: url('https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/card_bg.png');
		background-size: 100% 100%;
		width:6rem;
		height:3.6rem; 
		.vipText{
			height:0.4rem; 
			font-size:0.4rem;
			font-family:PingFangSC-Regular;
			color:rgba(255,255,255,1);
			line-height:0.4rem;
			text-align: center;
			padding: 1.6rem 0;
		}
	}
	input[disabled] {
		width: 100%;
		height: 1rem;
		font-size: .32rem;
		line-height: 1rem;
		background-color: #FBC200;
		color: #464646;
		border-radius: .08rem;
	}
	
	.overflow {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	.modalTitle {
		width: 4.3rem;
		height: 4.3rem;
		margin: .6rem .58rem .35rem .58rem;
	}
	
	.modalFailTitle {
		width: 1.2rem;
		height: 1.2rem;
		margin: .6rem 2.13rem .44rem 2.13rem;
	}
	
	.modalInfo {
		text-align: center;
		height: .45rem;
		line-height: .45rem;
		color: rgba(70, 70, 70, 1);
		font-size: .32rem;
		margin-bottom: .7rem;
	}
	
	.info-box {
		width: 140rem;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		align-items: center;
		margin: .7rem 0;
	}
	
	.img-box {}
	
	.info-box img.yf {
		width: .7rem;
		height: .57rem;
	}
	
	.info-box img.dx {
		width: .78rem;
		height: .55rem;
	}
	
	.info-box img.zk {
		width: .56rem;
		height: .64rem;
	}
	
	.divSection {
		width: 6rem;
		height: .01rem;
		background: rgba(230, 230, 230, 1);
		margin-bottom: .3rem;
	}
	
	.goHome {
		font-size: .24rem;
		color: rgba(144, 144, 144, 1);
		text-align: center;
		margin-bottom: .48rem;
	}
	
	.username {
		position: relative;
		height: 1.04rem;
		background-color: #fff;
		padding-left: 1.24rem;
		font-size: .3rem;
		border-bottom: .01rem solid #E6E6E6;
		align-items: center;
		.codebtn {
			position: absolute;
			right: 0rem;
			height: .5rem;
			padding: 0 .24rem;
			border-radius: .08rem;
			top: .26rem;
			width: 1.57rem;
			line-height: .49rem;
			font-size: .22rem;
			color: #FFFFFF;
			background-color: #FF4C5D;
			border: none;
			border-radius: .25rem;
			z-index: 10;
		}
		label {
			position: absolute;
			height: 1.04rem;
			font-size: .3rem;
			line-height: 1.04rem;
			left: 0;
			padding: 0 .05rem;
		}
		input {
			width: 100%;
			font-size: .3rem;
		}
	}
	
	input.Code {
		padding-right: 2rem;
	}
	
	.loginbtn {
		margin-top: .5rem;
		margin-bottom: .3rem;
		input {
			width: 100%;
			height: 1rem;
			font-size: .32rem;
			line-height: 1rem;
			background-color: #FBC200;
			color: #464646;
			border-radius: .08rem;
			-webkit-border-radius: .08rem;
			-moz-border-radius: .08rem;
		}
		.nosubmit {
			background-color: #bcbcbc;
		}
	}
	
	.agreement {
		background-color: #FFFFFF;
		padding-top: .4rem;
		font-size: .26rem;
		margin-top: 3rem;
		.iconchendx {
			display: inline-block;
			position: relative;
			&::before {
				content: '';
				width: .3rem;
				height: .3rem;
				border-radius: 50%;
				position: absolute;
				top: .02rem;
				left: -0.4rem;
				background: #FFFFFF;
				border: .01rem solid #e6e6e6;
			}
		}
		.selected::before {
			background-image: url("https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/pay_checked.png");
			border: 0;
			background-size: 100%;
		}
		.agreement_btn {
			color: #FBC200;
			padding-left: .01rem;
			text-decoration: underline;
		}
	}
	
	.section {
		width: 7.50rem;
		height: .18rem;
		background: rgba(242, 242, 242, 1);
		;
	}
	
	.app {
		max-width: 750px;
		min-width: 320px;
		height: 100%;
		width: 100%;
		margin: 0px auto;
		min-height: 100%;
		position: relative;
		display: flex;
	}
	
	#app {
		height: 100%;
		width: 100%;
	}
	
	@media screen and (min-width: 750px) {
		.app {
			background-color: #fff;
		}
		body {
			background-color: #000;
		}
	}
	
	.page {
		padding: .5rem .3rem;
	}
	
	.legal-box {
		margin-top: .5rem;
	}
	
	.legal-box .title {
		font-family: PingFangSC-Regular;
		font-size: .28rem;
		color: #464646;
		letter-spacing: 0;
		line-height: .28rem;
	}
	
	.tips {
		font-family: PingFangSC-Semibold;
		font-size: .32rem;
		color: #464646;
		letter-spacing: 0;
		line-height: .32rem;
	}
	
	.info {
		font-family: PingFangSC-Regular;
		font-size: .28rem;
		color: #909090;
		letter-spacing: 0;
		margin-top: .2rem;
	}
	
	.info p {
		padding: 0;
		margin: 0;
		position: relative;
		padding-left: .1rem;
	}
	
	.info p::before {
		content: "·";
		position: absolute;
		left: -0.05rem;
	}
	
	.img-box {
		height: 1.9rem;
		width: 6.9rem;
		background-color: #f2f2f2;
		border-radius: .1rem;
		margin-top: .5rem;
	}
	
	.img-box img {
		width: 100%;
		height: 100%;
		border-radius: .08rem;
	}
</style>